<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

        <link href="./11.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">
        	 function f1() {
        	 	console.log($("input[type='checkbox']:checked"));//得到的是所有选择的标签组成的数组
				// "11,22,33,44"
				// $("input[type='checkbox']:checked")[0]
        	 	var str = '';
				/*for (var i = 0; i < $("input[type='checkbox']:checked").length; i++) {
					// console.log($("input[type='checkbox']:checked")[i]);
					// console.log($("input[type='checkbox']:checked")[i].val());
					// jQuery是对DOM对象的封装，
					// jQuery对象加下标方式可以将jQuery对象转换成DOM对象
					//console.log($("input[type='checkbox']:checked")[i].value);
					//str += $("input[type='checkbox']:checked")[i].value + ','; 
					
					console.log($("input[type='checkbox']:checked").eq(i).val());
					str += $("input[type='checkbox']:checked").eq(i).val() + ',';
				} */
				
				// for (Student student : list) {}
				$.each($("input[type='checkbox']:checked"), function() {
					// 这里面有一个隐藏的this，代表当前正在遍历的对象
					// 而且这个this是JS的DOM对象
					// str += this.value + ',';
					
					// DOM对象转换为jQuery对象，只要把JS的DOM对象作为参数传递给$()
					str += $(this).val() + ',';
				});
				
				console.log(str);
				console.log(str.substring(0, str.length - 1));
        	 }
        	 
        	 function  f2() {
				 // attribute filed  property
        	 	//$(".hby:eq(1)").attr("checked", true);
        	 	
        	 	//设置多个复选框选中
        	 	$('.hby').val([22, 33]);
        	 }
        </script>
        <style type="text/css">
        	div{color:red; border:4px solid blue;}
        </style>
    </head>
    <body>
        <h1>复选框操作</h1>

        爱好：<!-- 22,33,44 -->
        <input type="checkbox" class="hby"  name="hobby" value="11" />篮球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="22" />足球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="33" />排球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="44" />乒乓球&nbsp;
        
        <br /><br />
        <input type="button" value="获取" onclick="f1()" />
        <input type="button" value="设置" onclick="f2()" />
    </body>
</html>